import React from "react";

class App extends React.Component {
  constructor() {
    //创建当前类型的实例 "必调"的方法
    super(); //一个类的构造方法第一句必须是调用父类的构造方法,super()
    console.log("App类型的一个实例被创建了");
    // 将当前类型中的f1方法中的this指向固定下来,永远指向当前APP的实例对象
  }
  // Vue.js中只有"模型数据"可以实现 "响应式变化"
  // React中只有 "状态数据"可以实现 "响应式变化"
  state = {
    count: 6,
  };
  // f1 = function () {
  f1 = () => {
    console.log("f1:", this);
  };

  render() {
    this.f1 = this.f1.bind(this);
    // console.log('render')
    // this.f1()
    // let count = 5;
    // function f1() {
    //   count--;                //注意: render中创建的局部变量无法实现"数据响应式"
    //   console.log(count);
    // }
    return (
      <div>
        {/* this指向undefinded */}
        {/* <button onClick={this.f1}>-</button> */}

        {/* 解决方案1:返回一个副本函数,其中的this固定绑定到当前的APP对象 */}
        {/* <button onClick={this.f1.bind(this)}>-</button> */}

        {/* 解决方案2: 在创建类型实例时,将this的指向固定下来 */}
        {/* <button onClick={this.f1}>-</button> */}

        {/* 解决方案3: */}
        {/* <button onClick={() => {this.f1();}}>-</button> */}

        {/*解决方案4:  */}
        <button
          onClick={() => {
            this.f1();
          }}
        >
          -
        </button>

        <span>{this.state.count}</span>
        <button>+</button>
      </div>
    );
  }
}

export default App;
